<template>
  <div class="cantainer">
    <div>
      <div class="flaps_cantainer1">F</div>
      <div class="flaps_cantainer2">L</div>
      <div class="flaps_cantainer2">A</div>
      <div class="flaps_cantainer2">P</div>
      <div class="flaps_cantainer2">S</div>
    </div>
    <div ref="indicator" class="indicator" :style="gradientStyle">
      <!-- 包裹横线和文本 -->
      <div class="flap-container" :style="{ top: `${linePosition}px` }">
        <div class="flap-line" :style="{ backgroundColor: indexColor }"></div>
        <span class="flap_index" :style="{ color: indexColor }" v-if="flapsIndex == 0">UP</span>
        <span class="flap_index" :style="{ color: indexColor }" v-else>{{
          flaps[flapsIndex]
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const indicator = ref(null)
const linePosition = ref(-3) // 保存横线的垂直位置
let intervalId = null // 用来保存定时器的ID
const indexColor = ref('rgb(155, 255, 134)')

// 襟翼角度
const flaps = ref([0, 1, 5, 10, 20, 25, 30])
const flapsIndex = ref(0)
// 动态背景的渐变
const gradientStyle = ref({
  background: `linear-gradient(to top, #202127 0%, #202127 100%, #dddddd 100%, #dddddd 100%)`
})

onMounted(() => {})

/**
 * 获取第二个7和第二个%之间的字符串以及第一个d和第三个%之间的字符串
 * @param str
 */
const getStringMatch = (str) => {
  // 使用正则表达式提取包含负号的百分比数值（不包括%）
  const regex = /-?\d+(\.\d+)?%/g
  let matches = []
  let match

  while ((match = regex.exec(str)) !== null) {
    matches.push(match[0].replace('%', '')) // 去除百分号，只保留数字
  }

  // 输出结果
  const res = (new Number(matches[1]) + new Number(matches[2])) / 2
  return res
}

const drawCanvas = (oldVal, newVal) => {
  indexColor.value = 'rgb(208, 132, 208)'
  const result = 100 - (flaps.value[newVal] / flaps.value[flaps.value.length - 1]) * 100

  let i = 1
  // 清除之前的定时器，防止多个定时器并行
  if (intervalId !== null) {
    clearInterval(intervalId)
  }
  let oldHeigthValue = gradientStyle.value.background
  let oldHeigth = new Number(getStringMatch(oldHeigthValue))
  const allDiff = result - oldHeigth
  let step = allDiff > 0 ? 0.2 : -0.2
  intervalId = setInterval(() => {
    let oldHeigthValue = gradientStyle.value.background
    let oldHeigth = new Number(getStringMatch(oldHeigthValue))
    if (Math.abs(result - oldHeigth) < Math.abs(step)) {
      clearInterval(intervalId)
      indexColor.value = 'rgb(155, 255, 134)'
    }
    gradientStyle.value.background = `linear-gradient(to top, #202127 0%, #202127 ${oldHeigth + step - 0.5}%, #dddddd ${oldHeigth + step + 0.5}%, #dddddd 100%)`
  }, 100)
}

const setFlapsIndicate = (params) => {
  const nowIndex = flapsIndex.value
  if (params === 'F5') {
    flapsIndex.value = 0
  } else if (params === 'F6') {
    flapsIndex.value = flapsIndex.value > 0 ? flapsIndex.value - 1 : flapsIndex.value
  } else if (params === 'F7') {
    flapsIndex.value =
      flapsIndex.value < flaps.value.length - 1 ? flapsIndex.value + 1 : flapsIndex.value
  } else {
    flapsIndex.value = flaps.value.length - 1
  }

  if (nowIndex != flapsIndex.value) {
    //绘制襟翼位置变化动画
    drawCanvas(nowIndex, flapsIndex.value)
    const angle = flaps.value[flapsIndex.value]
    // 获取元素的计算样式
    const computedStyle = getComputedStyle(indicator.value)
    // 获取上边框的宽度（单位是像素）
    const borderTopWidth = parseInt(computedStyle.borderTopWidth, 10)
    let height = (angle / 30) * (indicator.value.offsetHeight - borderTopWidth)

    // 设置横线的垂直位置
    linePosition.value = height - borderTopWidth
  }
}

defineExpose({
  setFlapsIndicate
})
</script>

<style scoped>
.cantainer {
  display: flex;
  margin-left: 200px;
}

.flaps_cantainer1 {
  margin-top: -5px;
  margin-right: 5px;
  color: rgb(173, 233, 246);
}

.flaps_cantainer2 {
  margin-top: -10px;
  margin-right: 5px;
  color: rgb(173, 233, 246);
}

.indicator {
  height: 100px;
  width: 30px;
  border: 3px solid #dddddd;
  border-radius: 2px;
  position: relative; /* 必须添加，才能将横线定位在正确的位置 */
}

.flap-container {
  position: absolute;
  width: 100%;
  text-align: center;
}

.flap-line {
  position: absolute;
  width: 40px;
  left: -8px;
  height: 3px;
}

.flap_index {
  position: absolute;
  top: -15px; /* 调整文本的垂直位置 */
  left: 50%; /* 水平居中 */
  transform: translateX(80%); /* 确保文本居中对齐 */
  width: 100%;
  text-align: center;
}
</style>
